<template>
<div class="approval">
  <el-col :span="widthCol" class="container-left">
    <div class="title">青岛市民中心政务数据统计</div>
    <el-row>
      <el-col :span="7">
        <div class="panel-left-1 common-panpel">
          <div class="angle angle-left-top"></div>
          <div class="angle angle-left-bottom"></div>
          <div class="angle angle-right-top"></div>
          <div class="angle angle-right-bottom"></div>
          <div style="padding: 25px;">
            <div class="subTit"><img src="../../assets/icon/icon-reception.png" width="28px" />改革创新成果</div>
            <!-- <div id="myChart" :style="{width: '100%', height: '380px'}"></div> -->
            <div class="disk">
              <div class="txt">
                <p v-for="(item, index) in qdmlbzData" :key="index">
                  <b>{{ item.name }}</b>
                  <span>{{ item.value }}</span>
                </p>
              </div>
            </div>
          </div>
        </div>
        <div class="panel-left-2 common-panpel">
          <div class="angle angle-left-top"></div>
          <div class="angle angle-left-bottom"></div>
          <div class="angle angle-right-top"></div>
          <div class="angle angle-right-bottom"></div>
          <div style="padding: 25px 25px 0;">
            <div class="subTit"><img src="../../assets/icon/icon-reception.png" width="28px" />一窗受理推进情况</div>
          </div>
          <div class="ycslBox">
            <div class="item" v-for="(item, index) in ycslArr" :key="index">
              <div class="num" :style="{color: item.color}">{{ item.value }}</div>
              <div class="tit" :style="{color: item.color}">{{ item.name }}</div>
            </div>
          </div>
        </div>
        <div class="panel-left-3 common-panpel">
          <div class="angle angle-left-top"></div>
          <div class="angle angle-left-bottom"></div>
          <div class="angle angle-right-top"></div>
          <div class="angle angle-right-bottom"></div>
          <div style="padding: 25px;">
            <div class="subTit"><img src="../../assets/icon/icon-reception.png" width="28px" />网办深度情况</div>
            <div id="myChart_2" :style="{width: '100%', height: '250px'}"></div>
          </div>
        </div>
      </el-col>
      <el-col :span="10">
        <div class="panel-middle-1 common-panpel">
          <div class="angle angle-left-top"></div>
          <div class="angle angle-left-bottom"></div>
          <div class="angle angle-right-top"></div>
          <div class="angle angle-right-bottom"></div>
          <div style="padding: 25px;">
            <div class="subTit"><img src="../../assets/icon/icon-reception.png" width="28px" />市民中心部门及人员概况</div>
            <div class="deptPersonTable">
              <el-col :span="6" class="elcol" v-for="(item, index) in bmrnqkArr" :key="index">
                <div class="item">
                  <div class="topBox">
                    <div class="tit">{{ item.title }}</div>
                    <img :src="item.iconSrc" width="113" />
                  </div>
                  <div class="bottomBox">
                    <div class="tit">{{ item.name }}</div>
                    <div class="num">{{ item.value }}</div>
                  </div>
                </div>
              </el-col>
            </div>
            <div class="deptPersonTable-1" style="height: 90px;">
              <table class="table">
                <thead>
                  <tr>
                    <th style="text-align: left;padding-left: 50px;">单位名称</th>
                    <th style="width: 16%;">事项总数</th>
                    <th style="width: 16%;">入驻人数</th>
                    <th style="width: 16%;">所在楼层</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td class="tit">{{ tableArr.unitName }}</td>
                    <td>{{ tableArr.item }}</td>
                    <td>{{ tableArr.personnel }}</td>
                    <td>{{ tableArr.floor }}</td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div class="deptPersonTable-1" style="margin-top: 0;">
              <table class="table" :style="{'marginTop': marginTop + 'px'}">
                <tbody>
                  <tr v-for="(item, index) in tableArr1" :key="index">
                    <td class="tit">{{ item.unitName }}</td>
                    <td style="width: 16%;">{{ item.item }}</td>
                    <td style="width: 16%;">{{ item.personnel }}</td>
                    <td style="width: 16%;">{{ item.floor }}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="7">
        <div class="panel-right-1 common-panpel">
          <div class="angle angle-left-top"></div>
          <div class="angle angle-left-bottom"></div>
          <div class="angle angle-right-top"></div>
          <div class="angle angle-right-bottom"></div>
          <div style="padding: 25px 25px 0;">
            <div class="subTit"><img src="../../assets/icon/icon-reception.png" width="28px" />市级依申请政务服务事项基本情况</div>
          </div>
          <div id="myChart_3" :style="{width: '75%', height: '380px', display: 'inline-block'}"></div>
          <div class="rightBox">
            <div class="item">
              <div class="num" :style="{color: '#08C7F1'}">{{ this.sxTotalNum }}</div>
              <div class="tit" :style="{color: '#08C7F1'}">事项总数</div>
            </div>
          </div>
          <!-- <div id="myChart_3" :style="{width: '75%', height: '380px', display: 'inline-block'}"></div> -->
            <!-- <div class="rightBox">
              <div class="item" v-for="(item, index) in fwsxArr" :key="index">
                <div class="num" :style="{color: item.color}">{{ item.value }}</div>
                <div class="tit" :style="{color: item.color}">{{ item.name }}</div>
              </div>
              <div class="item">
                <div class="num" :style="{color: '#08C7F1'}">{{ this.sjrzdtNum }}</div>
                <div class="tit" :style="{color: '#08C7F1'}">实际入驻大厅数</div>
              </div>
            </div> -->
        </div>
        <div class="panel-right-2 common-panpel">
          <div class="angle angle-left-top"></div>
          <div class="angle angle-left-bottom"></div>
          <div class="angle angle-right-top"></div>
          <div class="angle angle-right-bottom"></div>
          <div style="padding: 25px;">
            <div class="subTit"><img src="../../assets/icon/icon-reception.png" width="28px" />市行政审批局人员情况</div>
            <div class="ycslBox">
              <div class="item" v-for="(item, index) in ryjgArr" :key="index">
                <div class="num" :style="{color: item.color}">{{ item.value }}</div>
                <div class="tit" :style="{color: item.color}">{{ item.name }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="panel-right-3 common-panpel">
          <div class="angle angle-left-top"></div>
          <div class="angle angle-left-bottom"></div>
          <div class="angle angle-right-top"></div>
          <div class="angle angle-right-bottom"></div>
          <div style="padding: 25px;">
            <div class="subTit" style="font-size: 26px;"><img src="../../assets/icon/icon-reception.png" width="28px" />市行政审批局相对集中许可事项划转情况</div>
            <div class="chartBox">
              <div id="myChart_5" :style="{width: '100%', height: '250px'}"></div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </el-col>

</div>
</template>

<script>
var timer3
export default {
  name: 'approvalServices',
    props: {
      widthCol: {
        type: Number,
        default: 12
      }
  },
  components: {
    // EnterpriseEstablishment
  },
  data () {
    return {
      // 一窗受理推进情况
      ycslArr: [],
      fwsxArr: [],
      fwsxTotal: null, // 全市依申请政务服务事项总数
      qsfmqdNum: null, // 全市负面清单数
      sjrzdtNum: null, // 实际入驻大厅数
      sxTotalNum: null, // 事项总数
      // 大厅部门及人员概况
      bmrnqkArr: [],
      bmrnqkArr_win: [],
      bmrnqkArr_person: [],
      bmrnqkArr_sxs: [],
      // 大厅部门及人员概况
      tableArr: {},
      tableArr1: [],
      qdmlbzData: [], // 清单目录编制情况数据
      wbsdData: [], // 网办深度情况数据
      sxjzdtData: [], // 依申请政务服务事项进驻大厅情况数据
      ryjgData: [], // 人员机构情况数据
      sxhzData: [], // 事项划转情况数据
      ryjgArr: [], // 人员机构情况数据
      marginTop: 200, // 数据的margin-top
      timer: '', // 定时器
      bmjrygkTime: '', // “市民中心部门及人员概况”刷新时间
      dataidx: 0
    }
  },
  created() {
    clearInterval(timer3)
    this.timer = setInterval(this.showNotice, 30) // 100表示间隔时间，数字越小滚得越快
  },
  mounted() {
    this.getQdmlbzqkData() // 获取"清单目录编制情况"数据
    this.getYcsltjData() // 获取"一窗受理推进情况"数据
    this.getWbsdData() // 获取"网办深度情况"数据
    this.getBmrnqkData() // 获取“市民中心部门及人员概况”数据
    this.getBmrnqkData_floor() // 获取“市民中心部门及人员概况-带楼层”数据
    this.getSxjzdtData() // 获取"依申请政务服务事项进驻大厅情况"数据
    this.getSxjzdtData_sum() // 获取"依申请政务服务事项进驻大厅情况"总数数据
    this.getRyjgData() // 获取“市行政审批局人员机构情况”数据
    this.getSxhzData() // 获取“市行政审批局相对集中许可事项划转情况”数据
  },
  activated() {

  },
  methods: {
    // 数据循环滚动
    showNotice(){
      this.marginTop -= 1
      if(this.marginTop < -(this.tableArr1.length - 6) * 42){ // 滚上去36px后把前两条数据拉下来
        this.tableArr1.push(this.tableArr1[0])
        this.tableArr1.shift()
        this.marginTop = 200
      }
    },

    // 获取“清单目录编制情况”数据
    getQdmlbzqkData() {
      this.$http.get(window.SITE_CONFIG.apiURL + '/static/detail')
        .then(res => {
          this.qdmlbzData = res.data.data
        })
    },
    // 清单目录编制情况
    renderChart_qdmlbzqk() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart'))

      // 绘制图表
      const option = {
        color: ['#EECA00', '#FF75A6', '#7376FD', '#AE83FF', '#EE8100', '#448ACA', '#4FA000'],
        legend: {
          show: false,
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['22%', '50%'],
            center: ['50%', '55%'],
            data: this.qdmlbzData,
            label: {
              normal: {
                formatter: params => {
                  return (
                    params.name + ' ' + params.value + '项'
                  )
                },
                fontSize: 20,
                padding: [0, -5, 0, -5],
              }
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }

      myChart.setOption(option)
    },

    // 获取"一窗受理推进情况"数据
    getYcsltjData() {
      this.$http.get(window.SITE_CONFIG.apiURL + '/static/queryStatic', {
        params: {
          dictType: 'accept_promotion',
        }
      }).then(res => {
        let result = res.body.data
        result[0].color = '#0DDE79'
        result[1].color = '#009CFF'
        result[2].color = '#00EAED'
        this.ycslArr = result
      }).catch(() => {})
    },

    // 获取"网办深度情况"数据
    getWbsdData() {
      this.$http.post(window.SITE_CONFIG.apiURL + '/service656', {
        machineCode: 'SfJjeyP0xmnS6h8R',
        url: '/power/getItemCountByOnlineDepth/1.0',
        postdata: {}
      }).then(res => {
        let result = JSON.parse(res.body.result).data
        let arr = []
        // 把每一个对象的属性遍历出来
        Object.keys(result[0]).forEach(function(key){
          if (key !== '市本级入驻大厅依申请总数') {
            arr.push({
              name: key,
              value: result[0][key]
            })
          }
        })
        this.wbsdData = [arr[arr.length - 1], ...arr]
        this.wbsdData.pop()
        this.renderChart_wbsdqk() // 网办深度情况展示
      }).catch(() => {})
    },
    // 网办深度情况展示
    renderChart_wbsdqk() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart_2'))

      // 绘制图表
      const option = {
        color: ['#469F4B', '#FFC530', '#3DE7C9', '#00BAFF'],
        legend: {
          type: 'scroll',
          orient: 'vertical',
          left: 10,
          top: '25%',
          icon: "roundRect", //  这个字段控制形状 类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none
          itemWidth: 12, // 设置宽度
          itemHeight: 12, // 设置高度
          textStyle: {
            color: '#ffffff',
            fontSize: 20
          },
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['25%', '75%'],
            center: ['65%', '50%'],
            data: this.wbsdData,
            label: {
              normal: {
                formatter: params => {
                  return (
                    params.percent.toFixed(2) + '%'
                  )
                },
                fontSize: 20,
                padding: [0, -5, 0, -5],
              }
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }

      myChart.setOption(option)
    },

    // 获取“市民中心部门及人员概况”数据
    getBmrnqkData() {
      this.$http.get(window.SITE_CONFIG.apiURL + '/handling/queryPersonnel', {
        params: {
          dictType: 'personnel_win'
        }
      }).then(res => {
        let result = res.body.data
        result.map(item => {
          let obj_win = {
            title: item.aliasName,
            name: '窗口数',
            value: item.win
          }

          this.bmrnqkArr.push(obj_win)

          this.bmrnqkArr_win.push(obj_win)

          let obj_person = {
            title: item.aliasName,
            name: '人员数',
            value: item.personnel
          }
          this.bmrnqkArr_person.push(obj_person)

          let obj_item = {
            title: item.aliasName,
            name: '事项数',
            value: item.item
          }
          this.bmrnqkArr_sxs.push(obj_item)
        })

        this.bmrnqkArr[0].iconSrc = require('../../assets/icon/icon-total.png')
        this.bmrnqkArr[1].iconSrc = require('../../assets/icon/icon-zhdt.png')
        this.bmrnqkArr[2].iconSrc = require('../../assets/icon/icon-sw.png')
        this.bmrnqkArr[3].iconSrc = require('../../assets/icon/icon-bdc.png')
        this.bmrnqkArr[4].iconSrc = require('../../assets/icon/icon-gjj.png')
        this.bmrnqkArr[5].iconSrc = require('../../assets/icon/icon-rs.png')
        this.bmrnqkArr[6].iconSrc = require('../../assets/icon/icon-yb.png')
        this.bmrnqkArr[7].iconSrc = require('../../assets/icon/icon-ga.png')
        this.getBjlJumpTime()
      }).catch(() => {})
    },
    // 获取 市民中心部门及人员概况 切换时间
    getBjlJumpTime() {
      this.$http.get(window.SITE_CONFIG.apiURL + '/static/params', {
        params: {
          paramCode: 1005
        }
      }).then(res => {
        let result = res.body.data
        this.bmjrygkTime = result
        this.$nextTick(() => {
          this.changeData()
        })
      }).catch(() => {})
    },
    // 切换 市民中心部门及人员概况 数据
    changeData() {
        timer3 = setInterval(() => {
          this.dataidx = this.dataidx === 2 ? 0 : this.dataidx + 1
          switch (this.dataidx) {
            case 0: // 窗口数
              this.bmrnqkArr = this.bmrnqkArr_win
              break;
            case 1: // 人员数
              this.bmrnqkArr = this.bmrnqkArr_person
              break;
            case 2: // 事项数
              this.bmrnqkArr = this.bmrnqkArr_sxs
              break;
          }

          this.bmrnqkArr[0].iconSrc = require('../../assets/icon/icon-total.png')
          this.bmrnqkArr[1].iconSrc = require('../../assets/icon/icon-zhdt.png')
          this.bmrnqkArr[2].iconSrc = require('../../assets/icon/icon-sw.png')
          this.bmrnqkArr[3].iconSrc = require('../../assets/icon/icon-bdc.png')
          this.bmrnqkArr[4].iconSrc = require('../../assets/icon/icon-gjj.png')
          this.bmrnqkArr[5].iconSrc = require('../../assets/icon/icon-rs.png')
          this.bmrnqkArr[6].iconSrc = require('../../assets/icon/icon-yb.png')
          this.bmrnqkArr[7].iconSrc = require('../../assets/icon/icon-ga.png')
        }, 1000 * this.bmjrygkTime)
    },
    // 获取“市民中心部门及人员概况-带楼层”数据
    getBmrnqkData_floor() {
      this.$http.get(window.SITE_CONFIG.apiURL + '/handling/queryPersonnel', {
        params: {
          dictType: 'personnel_floor'
        }
      }).then(res => {
        let result = res.body.data
        this.tableArr = result[0]
        this.tableArr1 = result
        this.tableArr1.shift()
      }).catch(() => {})
    },

    // 获取"依申请政务服务事项进驻大厅情况"数据
    getSxjzdtData() {
      this.$http.get(window.SITE_CONFIG.apiURL + '/static/apply', {
        params: {
        }
      }).then(res => {
        let result = res.body.data
        this.sxjzdtData = result

        if (result) {
          // 事项求和
          result.forEach(item => {
            this.sxTotalNum += item.value
          })
        //   this.sxjzdtData = JSON.parse(result.list)
        //   this.sjrzdtNum = JSON.parse(result.actualObject.value)
         }
        this.renderChart_sxjzdtqk() // 依申请政务服务事项进驻大厅情况
      }).catch(() => {})
    },
    // 依申请政务服务事项进驻大厅情况
    renderChart_sxjzdtqk() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart_3'))
      console.log('sxTotalNum:', this.sxTotalNum)
      // 绘制图表
      const option = {
        color: ['#B3D465', '#3DE7C9', '#00B7EE', '#C71585', '#AE83FF','#EECA00', '#7376FD', '#FF75A6', '#145B7D', '#EC6941', '#4FA000'],
        legend: {
          show: false
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['0', '35%'],
            center: ['50%', '50%'],
            data: this.sxjzdtData,
            label: {
              normal: {
                formatter: params => {
                  // let percent = (Math.round(params.value/this.sxTotalNum * 10000)/100).toFixed(2) + '%'
                  return (
                    params.name + ' ' + params.value + '项'+ ' '
                  )
                },
                fontSize: 16,
                padding: [0, -15, 0, -15],
              }
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }

      myChart.setOption(option)
    },

    toPercent() {
      Number.prototype.toPercent = function(){
        return (Math.round(this * 10000)/100).toFixed(2) + '%';
      }
    },
    // 获取"依申请政务服务事项进驻大厅情况"总数数据
    getSxjzdtData_sum() {
      this.$http.get(window.SITE_CONFIG.apiURL + '/static/queryStatic', {
        params: {
          dictType: 'item_move',
          remark: 'sum'
        }
      }).then(res => {
        let result = res.body.data
        result[0].color = '#FEAF26'
        result[1].color = '#8FC31F'
        this.fwsxArr = result
      }).catch(() => {})
    },

    // 获取"市行政审批局人员机构情况"总数数据
    getRyjgData() {
      this.$http.get(window.SITE_CONFIG.apiURL + '/static/queryStatic', {
        params: {
          dictType: 'organization',
        }
      }).then(res => {
        let result = res.body.data

        result[0].color = '#0DDE79'
        result[1].color = '#009CFF'
        result[2].color = '#00EAED'
        this.ryjgArr = result
      }).catch(() => {})
    },

    // 获取"市行政审批局相对集中许可事项划转情况"总数数据
    getSxhzData() {
      this.$http.get(window.SITE_CONFIG.apiURL + '/static/queryStatic', {
        params: {
          dictType: 'item_conversion',
        }
      }).then(res => {
        let result = res.body.data
        this.sxhzData = result

        this.renderChart_sxhz() // 市行政审批局相对集中许可事项划转情况
      }).catch(() => {})
    },
    // 市行政审批局相对集中许可事项划转情况
    renderChart_sxhz() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart_5'))

      // 绘制图表
      const option = {
        color: ['#00B7EE', '#FF75A6', '#F8B551', '#AE83FF', '#B3D465'],
        legend: {
          show: true,
          orient: 'vertical',
          left: '70%',
          bottom: 50,
          icon: "roundRect", //  这个字段控制形状  类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none
          itemWidth: 16, // 设置宽度
          itemHeight: 8, // 设置高度
          textStyle: {
            color: '#ffffff',
            fontSize: 19
          },
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['3%', '60%'],
            center: ['35%', '60%'],
            data: this.sxhzData,
            label: {
              normal: {
                formatter: params => {
                  return (
                    // params.name + '\n' + params.value + '项'
                    params.value + '项'
                  )
                },
                fontSize: 19,
                padding: [0, -5, 0, -5],
              }
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }

      myChart.setOption(option)
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.approval {
.title {
  height: 103px;
  background: url('../../assets/background/bg_tit.png') no-repeat;
  font-size: 42px;
  font-weight: 700;
  text-align: center;
  margin: 0 0 35px 0;
  background-size: 100%;
  background-position-y: 25px;
}

.container-left {
  padding-right: 30px;

  .subTit {
    font-size: 29px;
    color: #00D2FF;
    font-weight: 600;

    img {
      position: relative;
      top: 3px;
      margin-right: 10px;
    }
  }

  .angle {
    position: absolute;
    width: 15px;
    height: 15px;
  }

  // 清单目录编制情况
  .panel-left-1 {
    border: 1px solid rgba(0, 255,255,0.1);
    height: 450px;
    margin-bottom: 15px;

    // .angle-left-top {
    //   left: 0;
    //   border-top: 1px solid #037C93;
    //   border-left: 1px solid #037C93;
    // }

    // .angle-left-bottom {
    //   top: 437px;
    //   left: 0;
    //   border-bottom: 1px solid #037C93;
    //   border-left: 1px solid #037C93;
    // }

    // .angle-right-top {
    //   left: 558px;
    //   border-top: 1px solid #037C93;
    //   border-right: 1px solid #037C93;
    // }

    // .angle-right-bottom {
    //   top: 437px;
    //   left: 558px;
    //   border-right: 1px solid #037C93;
    //   border-bottom: 1px solid #037C93;
    // }

  }

  // 一窗受理推进情况
  .panel-left-2 {
    border: 1px solid rgba(0, 255,255,0.1);
    height: 235px;
    margin-bottom: 15px;

    // .angle-left-top {
    //   left: 0;
    //   border-top: 1px solid #037C93;
    //   border-left: 1px solid #037C93;
    // }

    // .angle-left-bottom {
    //   top: 689px;
    //   left: 0;
    //   border-bottom: 1px solid #037C93;
    //   border-left: 1px solid #037C93;
    // }

    // .angle-right-top {
    //   left: 558px;
    //   border-top: 1px solid #037C93;
    //   border-right: 1px solid #037C93;
    // }

    // .angle-right-bottom {
    //   top: 689px;
    //   left: 558px;
    //   border-right: 1px solid #037C93;
    //   border-bottom: 1px solid #037C93;
    // }
  }

  .ycslBox {
    overflow: hidden;
    padding-left: 20px;

    .item {
      border: 1px solid #3755DA;
      width: 29%;
      height: 106px;
      margin-top: 30px;
      margin-right: 17px;
      display: inline-block;
      text-align: center;

      .tit {
        font-size: 22px;
      }
      .num {
        font-size: 32px;
        font-weight: 700;
        margin-bottom: 10px;
        margin-top: 15px;
      }
    }
  }

  // 网办深度情况展示
  .panel-left-3 {
    border: 1px solid rgba(0, 255,255,0.1);
    height: 324px;

    // .angle-left-top {
    //   left: 0;
    //   border-top: 1px solid #037C93;
    //   border-left: 1px solid #037C93;
    // }

    // .angle-left-bottom {
    //   left: 0;
    //   bottom: 15px;
    //   border-bottom: 1px solid #037C93;
    //   border-left: 1px solid #037C93;
    // }

    // .angle-right-top {
    //   left: 558px;
    //   border-top: 1px solid #037C93;
    //   border-right: 1px solid #037C93;
    // }

    // .angle-right-bottom {
    //   left: 558px;
    //   bottom: 15px;
    //   border-right: 1px solid #037C93;
    //   border-bottom: 1px solid #037C93;
    // }

  }

  // 大厅部门及人员概况
  .panel-middle-1 {
    border: 1px solid rgba(0, 255,255,0.1);
    height: 1046px;
    margin: 0 15px 15px;

    // .angle-left-top {
    //   left: 589px;
    //   border-top: 1px solid #037C93;
    //   border-left: 1px solid #037C93;
    // }

    // .angle-left-bottom {
    //   left: 589px;
    //   bottom: 15px;
    //   border-bottom: 1px solid #037C93;
    //   border-left: 1px solid #037C93;
    // }

    // .angle-right-top {
    //   left: 1365px;
    //   border-top: 1px solid #037C93;
    //   border-right: 1px solid #037C93;
    // }

    // .angle-right-bottom {
    //   left: 1365px;
    //   bottom: 15px;
    //   border-right: 1px solid #037C93;
    //   border-bottom: 1px solid #037C93;
    // }

    .deptPersonTable {
      overflow: hidden;
      margin-top: 30px;

      .elcol:first-child .item {
        border: 1px solid #FBB8A0;

        .topBox {
          background: radial-gradient(circle, rgba(255, 232, 206, 0.4) 0%, rgba(251, 184, 160, 0.4) 100%);

          .tit {
            color: #FBA980;
          }
        }

        .bottomBox {
          .tit {
            background-image:-webkit-linear-gradient(bottom, #FACC22, #F83600);
          }

          .num {
            background-image:-webkit-linear-gradient(bottom, #FACC22, #F83600);
          }
        }
      }
      .item {
        height: 210px;
        border: 1px solid #59BEFF;
        border-radius: 20px;
        margin-bottom: 30px;
        margin-right: 10px;

        .topBox {
          text-align: center;
          border-radius: 20px 20px  0 0;
          height: 110px;
          background: radial-gradient(circle, rgba(13, 204, 255, 0.4) 0%, rgba(71, 96, 255, 0.4) 100%);

          .tit {
            font-size: 19px;
            color: #BEE9F4;
            font-weight: 700;
            padding-top: 15px;
          }

          img {
            position: relative;
            bottom: 30px;
          }
        }

        .bottomBox {
          text-align: center;
          .tit {
            font-size: 22px;
            margin-top: 10px;
            background-image:-webkit-linear-gradient(bottom, #8FFCA0, #0BCBFB);
            -webkit-background-clip:text;
            -webkit-text-fill-color:transparent;
          }

          .num {
            font-size: 42px;
            font-weight: 700;
            background-image:-webkit-linear-gradient(bottom, #8FFCA0, #0BCBFB);
            -webkit-background-clip:text;
            -webkit-text-fill-color:transparent;
          }
        }
      }
    }

    .deptPersonTable-1 {
      overflow: hidden;
      margin-top: 15px;
      height: 350px;

      .table {
        width: 100%;
        border-spacing: 0;

        thead th {
          font-size: 20px;
          color: #C1F4FF;
          background: rgba(0, 206, 251, 0.12);
          padding: 10px 5px;
        }
        tbody tr td {
          text-align: center;
          font-size: 20px;
          padding: 7px 0;
          color: #00D2FF;
        }
        .tit {
          text-align: left;
          padding-left: 50px;
        }
      }
    }
  }

  // 依申请政务服务事项进驻大厅情况
  .panel-right-1 {
    border: 1px solid rgba(0, 255,255,0.1);
    height: 450px;
    margin-bottom: 15px;

    // .angle-left-top {
    //   right: 558px;
    //   border-top: 1px solid #037C93;
    //   border-left: 1px solid #037C93;
    // }

    // .angle-left-bottom {
    //   top: 436px;
    //   right: 558px;
    //   border-bottom: 1px solid #037C93;
    //   border-left: 1px solid #037C93;
    // }

    // .angle-right-top {
    //   right: 0;
    //   border-top: 1px solid #037C93;
    //   border-right: 1px solid #037C93;
    // }

    // .angle-right-bottom {
    //   top: 436px;
    //   right: 0;
    //   border-right: 1px solid #037C93;
    //   border-bottom: 1px solid #037C93;
    // }

    .rightBox {
      overflow: hidden;
      padding-left: 10px;
      width: 120px;
      display: inline-block;
      // margin-bottom: 35px;
      position: absolute;
      bottom: 35px;
      .item {
        border: 1px solid #3755DA;
        height: 95px;
        margin-top: 10px;
        box-sizing: border-box;
        text-align: center;
        &:not(:first-child) {
          padding-top: 10px;
        }
        .tit {
          font-size: 22px;
        }
        .num {
          font-size: 27px;
          font-weight: 700;
          margin-top: 10px;
        }
      }
    }
  }

  // 市行政审批局人员机构情况
  .panel-right-2 {
    border: 1px solid rgba(0, 255,255,0.1);
    height: 235px;
    margin-bottom: 15px;

    // .angle-left-top {
    //   right: 558px;
    //   border-top: 1px solid #037C93;
    //   border-left: 1px solid #037C93;
    // }

    // .angle-left-bottom {
    //   right: 558px;
    //   bottom: 358px;
    //   border-bottom: 1px solid #037C93;
    //   border-left: 1px solid #037C93;
    // }

    // .angle-right-top {
    //   right: 0;
    //   border-top: 1px solid #037C93;
    //   border-right: 1px solid #037C93;
    // }

    // .angle-right-bottom {
    //   right: 0;
    //   bottom: 358px;
    //   border-right: 1px solid #037C93;
    //   border-bottom: 1px solid #037C93;
    // }

    .chartBox {
      text-align: center;

      .small-tit {
        color: #B6F2FF;
        font-size: 22px;
        margin-top: 25px;
      }
    }
  }

  // 市行政审批局相对集中许可事项划转情况
  .panel-right-3 {
    border: 1px solid rgba(0, 255,255,0.1);
    height: 324px;

    // .angle-left-top {
    //   right: 558px;
    //   border-top: 1px solid #037C93;
    //   border-left: 1px solid #037C93;
    // }

    // .angle-left-bottom {
    //   right: 558px;
    //   bottom: 15px;
    //   border-bottom: 1px solid #037C93;
    //   border-left: 1px solid #037C93;
    // }

    // .angle-right-top {
    //   right: 0;
    //   border-top: 1px solid #037C93;
    //   border-right: 1px solid #037C93;
    // }

    // .angle-right-bottom {
    //   right: 0;
    //   bottom: 15px;
    //   border-right: 1px solid #037C93;
    //   border-bottom: 1px solid #037C93;
    // }
  }
}
}
@keyframes move { /*设置动画关键帧*/
    0% {
        transform: rotateY(0deg);
    }
    100% {
        transform: rotateY(360deg);
    }
}

@keyframes opaci1 { /*设置动画关键帧*/
    0% {
        opacity: 1;
    }
    50% {
        opacity: .1;
    }
    100% {
        opacity: 1;
    }
}
.disk {
  width: 100%;
  height: 380px;
  background-image: url('../../assets/background/bg-disk.png');
  background-size: 80%;
  background-position: 50% 0px;
  background-repeat: no-repeat;
  position: relative;
  perspective: 0px;
  .txt {
    width: 50%;
    margin: 0 auto;
    position: absolute;
    left: 0;
    right: 0;
    transform-style: preserve-3d; /*设置3D属性让子元素三维空间呈现*/
    animation: move 18s linear infinite; /*设置动画*/
  }
  p {
    width: 28px;
    height: 160px;
    font-size: 26px;
    padding: 5px;
    float: left;
    text-align: center;
    position: absolute;
    left: 50%;
    transform-style: preserve-3d;
    span {
      position: relative;
      left: -8px;
    }
    &::after{
      content: '';
      width: 6px;
      height: 150px;
      position: absolute;
      right: 0px;
      top: 0;
      opacity: .4;
    }
    &:nth-child(1) {
      color: #ffc530;
      top: 90px;
      transform: rotateY(0deg) translateZ(105px);
      animation: opaci1 18s linear infinite; /*设置动画*/
    }
    &:nth-child(2) {
      color: #3de7c9;
      transform: rotateY(60deg) translateZ(105px);
      animation: opaci1 18s linear infinite 15s; /*设置动画*/
    }
    &:nth-child(3) {
      color: #469f4b;
      top: 80px;
      transform: rotateY(120deg) translateZ(105px);
      animation: opaci1 18s linear infinite 12s; /*设置动画*/
    }
    &:nth-child(4) {
      color: #ea68a2;
      top: 20px;
      transform: rotateY(180deg) translateZ(105px);
      animation: opaci1 18s linear infinite 9s; /*设置动画*/
    }
    &:nth-child(5) {
      color: #ff9100;
      top: 60px;
      transform: rotateY(240deg) translateZ(105px);
      animation: opaci1 18s linear infinite 6s; /*设置动画*/
    }
    &:nth-child(6) {
      color: #ae83ff;
      top: 40px;
      transform: rotateY(300deg) translateZ(105px);
      animation: opaci1 18s linear infinite 3s; /*设置动画*/
    }
  }
}
</style>
